/**
 * ----------------------------------------------------------
 * 页面底部的加载更多按钮
 *
 * @version  1.0
 * @author shaqihe(shaqihecome@163.com)
 *
 * @module src/components/loadmore
 * ----------------------------------------------------------
 */
<template>
    <div class="ux-load-more" @click="load">
        <span v-show="!loading" >加载更多</span>
        <div v-show="loading" class="spinner">
            <div class="rect1"></div>
            <div class="rect2"></div>
            <div class="rect3"></div>
            <div class="rect4"></div>
            <div class="rect5"></div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'loadMore',
    props: ['loading'],
    data() {
        return {

        }
    },
    methods: {
        load() {
            this.$emit('load');
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
    @import "../assets/scss/min.scss";
    .ux-load-more {
        height: px2rem(80);
        line-height: px2rem(80);
        background-color: #fff;
        margin: px2rem(45) 0;
        text-align: center;
        color: #514331;
        .loading {
            width: 150px;
            height: 4px;
            border-radius: 2px;
            margin: 0 auto;
            margin-top:100px;
            position: relative;
            background: lightgreen;
            -webkit-animation: changeBgColor .4s ease-in infinite alternate;
        }

        .spinner {
            margin: 0 auto;
            display: inline-block;
            width: 60px;
            height: 35px;
            text-align: center;
            font-size: 10px;
        }

        .spinner > div {
            background-color: #7e7e85;
            height: 100%;
            width: 6px;
            display: inline-block;
            -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
            animation: stretchdelay 1.2s infinite ease-in-out;
        }

        .spinner .rect2 {
            -webkit-animation-delay: -1.1s;
            animation-delay: -1.1s;
        }
        .spinner .rect3 {
            -webkit-animation-delay: -1.0s;
            animation-delay: -1.0s;
        }

        .spinner .rect4 {
            -webkit-animation-delay: -0.9s;
            animation-delay: -0.9s;
        }

        .spinner .rect5 {
            -webkit-animation-delay: -0.8s;
            animation-delay: -0.8s;
        }

        @-webkit-keyframes stretchdelay {
            0%, 40%, 100% {
                -webkit-transform: scaleY(0.4)
            }
            20% {
                -webkit-transform: scaleY(1.0)
            }
        }

        @keyframes stretchdelay {
            0%, 40%, 100% {
                transform: scaleY(0.4);
                -webkit-transform: scaleY(0.4);
           }
            20% {
                transform: scaleY(1.0);
               -webkit-transform: scaleY(1.0);
            }
        }
    }

</style>
